<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="../static/bootstrap-3.4.1/dist/css/bootstrap.min.css">
    <script src="../static/jQuery-v3.6.0/jQueryv3.6.0.js"></script>
    <script src="../static/bootstrap-3.4.1/dist/js/bootstrap.min.js"></script>
</head>

<body>
    <p>标签式的导航菜单</p>
    <ul class="nav nav-tabs">
        <li ><a href="#">Home</a></li>
        <li class="active"> <a href="#">SVN</a></li>
        <li><a href="#">iOS</a></li>
        <li><a href="#">VB.Net</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li>
    </ul>
    <hr/>
    <p>基本的胶囊式导航菜单</p><ul class="nav nav-pills">
        <li ><a href="#">Home</a></li>
        <li><a href="#">SVN</a></li>
        <li class="active"><a href="#">iOS</a></li>
        <li><a href="#">VB.Net</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li></ul>   
        
        <!-- <p>垂直的的胶囊式导航菜单</p>
        <ul class="nav nav-pills nav-stacked">
        <li ><a href="#">Home</a></li>
        <li><a href="#">SVN</a></li>
        <li class="active"><a href="#">iOS</a></li>
        <li><a href="#">VB.Net</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li></ul>   -->
        
        <p>基本的胶囊式导航菜单</p><ul class="nav nav-pills nav-justified">
        <li class="disabled"><a href="#">Home</a></li>
        <li><a href="#">SVN</a></li>
        <li class="active"><a href="#">iOS</a></li>
        <li><a href="#">VB.Net</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li></ul>  
        <hr/>
        <p>带有下拉菜单的标签</p><ul class="nav nav-tabs">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                   iOS <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                   <li><a href="#">Swing</a></li>
                   <li><a href="#">jMeter</a></li>
                   <li><a href="#">EJB</a></li>
                   <li class="divider"></li>
                   <li><a href="#">分离的链接</a></li>
                </ul>
             </li>
            <li><a href="#">VB.Net</a></li>
            <li class="dropdown">
               <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                  Java <span class="caret"></span>
               </a>
               <ul class="dropdown-menu">
                  <li><a href="#">Swing</a></li>
                  <li><a href="#">jMeter</a></li>
                  <li><a href="#">EJB</a></li>
                  <li class="divider"></li>
                  <li><a href="#">分离的链接</a></li>
               </ul>
            </li>
            <li><a href="#">PHP</a></li></ul>
</body>

</html>